<template>
  <div class="box">
    <div class="content">
    <div class="music-top">
      <div class="music-topi">
        <ul>
        <li>音乐馆</li>
        <li style="color:rgba(255, 255, 255, 0.3);">听书</li>
        </ul>
      </div>
      <!-- inputs不可点击 -->
      <div class="music-tope">
         <input
         disabled
         class="inputs"
         type="text"
         placeholder="   推荐:无人岛"
         >
        <van-icon name="music-o"  size="30" class="inps"/>
      </div>
    </div>
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item  v-for="item of banner" :key="item.imageUrl">
          <van-image
            :src="item.imageUrl"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="songv">
      <ul>
        <li>
          <span><van-icon name="contact" size="20" color="#009966" @click="$router.push('star')"/></span>
          <p>歌手</p>
        </li>
        <li>
          <span><van-icon name="bar-chart-o" size="20" color="#009966" @click="$router.push('/row.vue')"/></span>
          <p>排行</p>
        </li>
        <li>
          <span><van-icon name="qr" size="20" color="#009966" @click="$router.push('recommend')"/></span>
          <p>分类</p>
        </li>
        <li>
          <span><van-icon name="diamond-o" size="20" color="#009966" @click="$router.push('Sine')"/></span>
          <p>电台</p>
        </li>
        <li>
        <span><van-icon name="service-o" size="20" color="#009966" @click="$router.push('./Listen')"/></span>
        <p>一起听</p>
        </li>
      </ul>
    </div>
    <div class="two">
      <div class="two-i" style="marginRight:0.1rem">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590648132510&di=4a20fcad4a82865015e86862285f899a&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fln%2Fpics%2Fhv1%2F181%2F80%2F1885%2F122592706.jpg" alt="">
        <h2>新歌 新碟</h2>
        <div class="van-ellipsis">传闻中的周冬瓜</div>
      </div>
      <div class="two-i">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2555836270,213180461&fm=26&gp=0.jpg" alt="">
        <h2>少年 懵懂</h2>
        <div class="van-ellipsis">你还怀念吗....</div>
      </div>
    </div>
    <div class="Rmhot">
       <div class="Rmhot-h1">
        <h1>热门歌曲</h1>
        <p>更多<van-icon name="arrow" class="nise"/></p>
       </div>
       <div class="Rmhot-h2">
        <ul>
          <li v-for="item in polist" :key="item.commentThreadId" @click="sts(item.id)">
            <van-image width="80" height="65" :src="item.coverImgUrl" />
            <h5>{{item.tag}}</h5>
            <p class="van-ellipsis">{{item.name}}</p>
            <div class="icon-rmhot">
              <van-icon name="audio" color="#fff" size="5" class="nic"><i class="nic">{{item.trackCount}}</i></van-icon>
              <van-icon name="play-circle-o" color="#fff" size="15"/>
            </div>
          </li>
        </ul>
       </div>
    </div>
      <div class="nitIn">
        <div class="Rmhot-h1">
          <h1>在线精选</h1>
          <p>更多<van-icon name="arrow" class="nise"/></p>
        </div>
        <ul>
          <li v-for="ite in list" :key="ite.id" @click="geqv(ite)">
            <van-image width="50" height="50"  :src="ite.picUrl"/>
            <div class="ite">
              <h3>{{ite.name}}</h3>
              <p>{{ite.song.artists[0].name}}</p>
            </div>
            <van-icon class="lisn" name="play-circle-o" color="#009966" size="25"/>
          </li>
        </ul>
      </div>
          <div class="Rmhot">
       <div class="Rmhot-h1">
        <h1>推荐MV</h1>
        <p>更多<van-icon name="arrow" class="nise"/></p>
       </div>
       <div class="Rmhot-h3">
        <ul>
          <li v-for="item in setMv" :key="item.artistId" @click="mv(item.id)">
            <van-image width="1.5rem" height="1.1 rem" :src="item.cover" />
            <span class="van-ellipsis">{{item.artistName}}</span>
              <van-icon name="live" color="#fff" size="15" class="nics"><i>{{item.playCount}}</i></van-icon>
          </li>
        </ul>
       </div>
    </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
// import play from './../../components/play'
import { getBannerlist, getpolist, getlist, exclusive, dianTaoi } from '@/api'
import { mapActions } from 'vuex'
import { Tab, Tabs, Toast, Search, Icon, Swipe, SwipeItem, Image as VanImage } from 'vant'
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Search)
Vue.use(Toast)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
export default {
  data () {
    return {
      value: '',
      active: 1,
      banner: [],
      polist: [],
      list: [],
      setMv: [],
      playUrl: '',
      diantai: []
    }
  },
  // 实例挂在 通常是用来渲染
  created () {
    // this.increment()
    // this.$nextTick
    // console.log(this.$store.state)
    // 轮播图
    getBannerlist().then(res => {
      this.banner = res.data.banners
    })
    // 获取热门歌单
    getpolist().then(res => {
      this.polist = res.data.playlists
    })
    // 获取大家都在听 在线精选
    getlist().then(res => {
      this.list = res.data.result.slice(0, 5)
    })
    // 获取MV
    exclusive().then(res => {
      this.setMv = res.data.data
    })
    // 电台
    dianTaoi().then(res => {
      // console.log(res.data.result)
      this.diantai = res.data.result
    })
  },
  // 自定义方法type
  methods: {
    ...mapActions(['getaaa']),
    // ...mapActions('home', {
    //   increment: 'increment'
    // }),
    geqv (ite) {
      this.getaaa(ite.id)
      // this.increment()
    },
    mv (id) {
      this.$router.push({ name: 'mv', params: { id } })
    },
    sts (id) {
      this.$router.push({ name: 'detail', params: { id } })
    },
    sayArr () {
      console.log(1)
      console.log(this.arr)
    }
  }
  // 使用状态去拿电台的都东西
  // computed: {
  //   ...mapState('home', {
  //     arr: state => state.arr
  //   })
  // }
}
</script>
<style lang="scss">
// /deep/.van-tabs__nav--line{
//   height: 0.1rem;
// }

/deep/.van-search{
  background: #6464;
  border-radius: 15%;
}
/deep/.van-tabs__wrap{
  height: 0.1rem !important;
}
html,body{
  background: #222;
}
.music-top{
  height: 0.4rem;
  box-sizing: border-box;
  // border: 1px solid black;
  display: flex;
  .music-topi{
     height: 0.4rem;
    //  border: 1px solid black;
     width: 1.7rem;
     ul{
       display: flex;
       li{
         line-height: 0.4rem;
         margin: 0 0.1rem;
         color: #ffcd32;
       }
     }
  }
.inputs{
  border: 1px solid #646;
  border-radius:1rem;
  width: 1.5rem;
  height: 0.35rem;
  margin-left: -0.5rem;
  background: #ccc;
}
}
.content{
  padding: 0.15rem ;
}
.inps{
  position: absolute;
  right: 0.12rem;
  top: 0.18rem;
  color: rgb(0, 153, 102);
}
.swiper{
  margin-top: 0.1rem;
  // border: 1px solid black;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
}
.songv{
  height: 0.85rem;
  // border: 1px solid black;
  ul{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    height: 0.85rem;
    li{
      display: flex;
      flex-direction: column;
      align-items: center;
      p{
        line-height: 0.28rem;
        opacity: 0.9;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.3);
      }
    }
  }
}
.two{
  height: 0.6rem;
  // border: 1px solid black;
  display: flex;
  justify-content:space-around;
  .two-i{
    padding: 0.03rem;
    flex: 1;
    // border: 1px solid red;
    line-height: 0.2rem;
    font-size: 0.05rem;
    img{
      width: 0.5rem;
      height: 0.5rem;
      float: left;
    }
    h2{
      text-indent:0.1rem;
      font-size: 0.11rem;
      line-height: 0.28rem;
      color: #fff;
    }
    .van-ellipsis{
      text-indent:0.1rem;
      color: rgba(255, 255, 255, 0.3);
    }
  }
}
.nise{
  position: absolute;
  top: 0.03rem;
}
.Rmhot{
  margin-top: 0.08rem;
  // 可以删除
  height: 2.2rem;
  // border: 1px solid black;
  .Rmhot-h1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.35rem;
    overflow: auto;
    h1{
      color: #ffcd32;
    }
    p{
      position: relative;
      left: -0.1rem;
      font-size: 0.12rem;
      font-weight: bold;
      margin-left: 0.1rem;
      text-align: center;
    }
  }
  .Rmhot-h2{
    width: 100%;
    height: 2rem;
    // border: 1px solid brown;
    overflow: auto;
    ul{
      height: 2rem;
      overflow: auto;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      li{
        display: flex;
        flex-direction: column;
        width: 0.8rem;
        height:0.94rem;
        // border: 1px solid burlywood;
        overflow: auto;
        margin-right: 0.1rem;
        margin-bottom: 0.06rem;
        position: relative;
        h5{
          font-size: 0.1rem;
          text-indent: 0.05rem;
          color: rgba(255, 255, 255, 0.849);
        }
        p{
            font-size: 0.05rem;
            color: rgba(255, 255, 255, 0.3);
        }
        .icon-rmhot{
          position: absolute;
          justify-content: space-between;
          top: 0.5rem;
          display: flex;
          width: 0.75rem;
          // border: 1px solid black;
        }
      }
    }
  }
}
.nic{
  margin-left:0.04rem;
}
.nitIn{
  // border: 1px solid black;
  margin-top: 0.15rem;
  overflow: auto;
  .Rmhot-h1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.35rem;
    h1{
      color: #ffcd32;
    }
    //  overflow: auto;
    p{
      position: relative;
      left: -0.1rem;
      font-size: 0.12rem;
      font-weight: bold;
      margin-left: 0.1rem;
      text-align: center;
    }
  }
  ul{
    li{
      display: flex;
      justify-content: space-between;
      margin: 0.1rem 0;
      // text-align: center;
      h3{
        color: #ccc;
        margin-left: -0.99rem;
      }
      p{
        margin-left: -0.99rem;
        color: rgba(255, 255, 255, 0.603);
        font-size: 0.1rem;
        margin-top: 0.05rem;
      }
      .lisn{
        margin-top: 0.1rem;
      }
    }
  }
}
.Rmhot-h3{
  overflow: auto;
  margin-bottom: 0.4rem;
  ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    li{
      width: 1.5rem;
      height: 1.3rem;
      overflow: auto;
      position: relative;
      .van-image{
        border-radius: 0.15rem;
        width: 1.5rem;
        height: 1rem;
        overflow: hidden;
      }
      .van-ellipsis{
        display: block;
        color: rgba(255, 255, 255, 0.3);
        font-size: 0.1rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .nics{
        position: absolute;
        bottom: 0.4rem;
        right: 0.1rem;
        i{
          color: #ccc;
          font-size: 0.1rem;
          margin-left: 0.05rem;
        }
      }
    }
  }
}
.swiper img{
  width: 100%;
  height: 119px;
}

</style>
